<template>
  <div class="h-100 position-relative">
    <!-- 只有经过导航过来的时候，此头部才展示 -->
    <customDetailsTopbar v-if="$route.query.enterpriseInfo" title="企业名称" flag />
    <!-- 地图功能归纳区域 -->
    <mapInductionArea />
    <div id="map" ref="map" class="map" />
    <!-- 河流和点位气泡弹窗 -->
    <div id="popup" class="ol-popup">
      <div id="popup-content" />
    </div>
    <div id="heliupup" class="ol-popup heliupups">
      <i id="guanbixx" class="guanbixx el-icon-close" @click="hlguanbi" />
      <div id="heliupup-content">
        <div class="ol_qipao">
          <div>
            <div class="mapHoverTitle yidonghover" @mousedown="handleRemove($event)">壶流河</div>
            <div class="mapHoverContent" />
          </div>
        </div>
      </div>
    </div>
    <div id="dianpup" class="ol-adddian">
      <div id="dianpup-content" />
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import mapMixin from '@/assets/mixin/mapHandler'
import { initTDTLayer } from '@/utils/map/mapTools3x'
import { wryListOpt } from '@/views/map/data'
import { useHandleRemove } from '@/hooks'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import MapInductionArea from '@/views/map/components/mapInductionArea.vue'

export default {
  name: 'Map',
  components: { MapInductionArea, CustomDetailsTopbar },
  inject: ['layout'],
  mixins: [mapMixin],
  data() {
    return {
      wryListOpt // 污染源复选框
    }
  },
  created() {

  },
  methods: {
    /**
     * 地图初始化
     * @returns {Promise<void>}
     */
    async gisInit() {
      const self = this
      self.$refs.map.innerHTML = ''
      // eslint-disable-next-line no-undef
      const map = new ol.Map(self.mapBaseInfo)
      self.map = map
      await initTDTLayer(map, this.currentType, 'zhengti', self)
      // 图例数据
      setTimeout(() => {
        const beidaiheBounds = [118.33, 39.24, 119.6, 40.37]
        this.map.getView().fit(beidaiheBounds, { duration: 2000 })
      }, 2000)
    },
    /**
     * 关闭河流弹窗
     */
    hlguanbi() {
      $('#heliupup').hide()
    },
    /**
     * 按下河流之后的模态框处理
     * @param e
     */
    handleRemove(e) {
      useHandleRemove(e)
    }
  }
}
</script>
